<template>
  <div class="rules" v-if="config">
    <div class="mes-board-view" v-if="isMes">
      <template v-for="r of 20">
        <template v-for="c of 20">
          <div class="mes-cell" :key="r + '_' + c"></div>
        </template>
      </template>
      <template v-for="(box, idx) of chartBoxes">
        <div
          class="mes-box"
          :style="{
            left: box.x * 5 + '%',
            top: box.y * 5 + '%',
            width: box.w * 5 + '%',
            height: box.h * 5 + '%'
          }"
          :key="'box-' + idx"
        ></div>
      </template>
    </div>

    <div class="rules-title">
      <span class="title">
        {{
          isMes ? '' : $srv.getI18nByPath('piece.oChartSetting.chartsettings')
        }}
      </span>
      <Button size="small" @click="addTableGroup">{{
        $srv.getI18nByPath('piece.oChartSetting.addtable')
      }}</Button>
      <Button size="small" @click="addChartGroup">{{
        $srv.getI18nByPath('piece.oChartSetting.addgraphics')
      }}</Button>
    </div>

    <div class="rules-cell" v-for="(item, idx) of config" :key="idx">
      <div v-if="item.type == 'table'">
        <div class="rules-cell-title cell-four">
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.logo')"
            v-model="item.mes.id"
            @on-blur="saveChanges"
          ></i-input>
          <div class="rules-cell-btns">
            <Button size="small" @click="addChartFilter(idx)"
              >{{ $srv.getI18nByPath('piece.oChartSetting.filter') }}+</Button
            >
            <Icon type="md-close" @click="removeChartGroup(idx)" />
          </div>
        </div>
        <div class="rules-cell-title cell-four">
          <i-input
            :placeholder="
              'X' + $srv.getI18nByPath('piece.oChartSetting.coordinate')
            "
            v-model="item.mes.x"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            :placeholder="
              'Y' + $srv.getI18nByPath('piece.oChartSetting.coordinate')
            "
            v-model="item.mes.y"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.width')"
            v-model="item.mes.w"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.height')"
            v-model="item.mes.h"
            @on-blur="saveChanges"
          ></i-input>
        </div>
        <div class="rules-cell-title cell-four">
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.title')"
            v-model="item.grid.title.text"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.subtitle')"
            v-model="item.grid.title.subtext"
            @on-blur="saveChanges"
          ></i-input>
        </div>
        <div class="rules-cons no-border">
          <div class="rules-cons-inputs">
            <div class="rules-cons-fields">
              <span>{{ $srv.getI18nByPath('piece.oChartSetting.data') }}:</span>
              <i-input
                :placeholder="
                  $srv.getI18nByPath('piece.oChartSetting.maximumnumber')
                "
                v-model="item.mes.limit"
                @on-blur="saveChanges"
              ></i-input>
              <div class="verticle">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.accumulation')
                  }}：</span
                >
                <iSwitch
                  size="small"
                  @on-change="saveChanges"
                  v-model="item.mes.isAcc"
                ></iSwitch>
              </div>
            </div>
            <Row type="flex" justify="space-between">
              <i-col span="11"
                ><span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.titlecolor')
                  }}: </span
                ><ColorPicker size="small" v-model="item.grid.style.titleColor"
              /></i-col>
              <i-col span="11"
                ><span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.rowheight')
                  }}: </span
                ><i-input
                  style="width: 40px"
                  size="small"
                  v-model="item.grid.style.rowHeight"
              /></i-col>
            </Row>
            <Row style="height: 14px"></Row>
            <Row type="flex" justify="space-between">
              <i-col span="11"
                ><span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.headerfontsize')
                  }}: </span
                ><i-input
                  style="width: 40px"
                  size="small"
                  v-model="item.grid.style.headerFontSize"
              /></i-col>
              <i-col span="11"
                ><span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.bodyfontsize')
                  }}: </span
                ><i-input
                  style="width: 40px"
                  size="small"
                  v-model="item.grid.style.bodyFontSize"
              /></i-col>
            </Row>
            <Row style="height: 14px"></Row>
            <Row type="flex" justify="space-between">
              <i-col span="11"
                ><span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.singlelinecolor')
                  }}: </span
                ><ColorPicker size="small" v-model="item.grid.style.oddRowColor"
              /></i-col>
              <i-col span="11"
                ><span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.singlerowcolor')
                  }}: </span
                ><ColorPicker
                  size="small"
                  v-model="item.grid.style.oddRowBgColor"
              /></i-col>
            </Row>
            <Row style="height: 14px"></Row>
            <Row type="flex" justify="space-between">
              <i-col span="11"
                ><span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.doublelinecolor')
                  }}: </span
                ><ColorPicker
                  size="small"
                  v-model="item.grid.style.evenRowColor"
              /></i-col>
              <i-col span="11"
                ><span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.doublerowcolor')
                  }}: </span
                ><ColorPicker
                  size="small"
                  v-model="item.grid.style.evenRowBgColor"
              /></i-col>
            </Row>
          </div>
        </div>
        <template v-if="item.filters">
          <div
            class="rules-cons header-group-children"
            v-for="(child, iidx) of item.filters"
            :key="'filter' + iidx"
          >
            <div class="rules-cons-inputs">
              <div class="rules-cons-fields">
                <i-input
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.field')"
                  v-model="child.field"
                  @on-blur="saveChanges"
                ></i-input>
                <i-input
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.value')"
                  v-model="child.value"
                  @on-blur="saveChanges"
                ></i-input>
              </div>
            </div>
            <div class="rules-res-btns">
              <Icon type="md-close" @click="removeChartFilter(idx, iidx)" />
            </div>
          </div>
        </template>
      </div>
      <div v-else>
        <div class="rules-cell-title cell-four">
          <i-input
            v-if="!isMes"
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.groupname')"
            v-model="item.groupName"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            v-if="!isMes"
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.width')"
            v-model="item.group.ratio"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            v-if="isMes"
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.logo')"
            v-model="item.mes.id"
            @on-blur="saveChanges"
          ></i-input>
          <div class="rules-cell-btns">
            <Button size="small" @click="addChartFilter(idx)" v-if="isMes"
              >{{ $srv.getI18nByPath('piece.oChartSetting.filter') }}+</Button
            >
            <Button size="small" @click="addChartX(idx)">X+</Button>
            <Button size="small" @click="addChartY(idx)">Y+</Button>
            <Button size="small" @click="addChartShape(idx)">
              {{ $srv.getI18nByPath('piece.oChartSetting.shape') }}
            </Button>
            <Icon type="md-close" @click="removeChartGroup(idx)" />
          </div>
        </div>
        <div class="rules-cell-title cell-four" v-if="isMes">
          <i-input
            :placeholder="
              'X' + $srv.getI18nByPath('piece.oChartSetting.coordinate')
            "
            v-model="item.mes.x"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            :placeholder="
              'Y' + $srv.getI18nByPath('piece.oChartSetting.coordinate')
            "
            v-model="item.mes.y"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.width')"
            v-model="item.mes.w"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.height')"
            v-model="item.mes.h"
            @on-blur="saveChanges"
          ></i-input>
        </div>
        <div class="rules-cell-title cell-four">
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.title')"
            v-model="item.grid.title.text"
            @on-blur="saveChanges"
          ></i-input>
          <i-input
            :placeholder="$srv.getI18nByPath('piece.oChartSetting.subtitle')"
            v-model="item.grid.title.subtext"
            @on-blur="saveChanges"
          ></i-input>
        </div>
        <div class="rules-cons">
          <div class="rules-cons-inputs">
            <div class="rules-cons-fields" v-if="isMes">
              <span
                >{{ $srv.getI18nByPath('piece.oChartSetting.data') }}：</span
              >
              <i-input
                :placeholder="
                  $srv.getI18nByPath('piece.oChartSetting.maximumnumber')
                "
                v-model="item.mes.limit"
                @on-blur="saveChanges"
              ></i-input>
              <div class="verticle">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.accumulation')
                  }}：</span
                >
                <iSwitch
                  size="small"
                  @on-change="saveChanges"
                  v-model="item.mes.isAcc"
                ></iSwitch>
              </div>
            </div>
            <div class="rules-cons-fields">
              <div class="verticle">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.defaultdisplay')
                  }}：</span
                >
                <iSwitch
                  size="small"
                  @on-change="saveChanges"
                  v-model="item.isShow"
                ></iSwitch>
              </div>
            </div>
            <div class="rules-cons-fields">
              <span
                >{{ $srv.getI18nByPath('piece.oChartSetting.slider') }}：</span
              >
              <i-input
                :placeholder="$srv.getI18nByPath('piece.oChartSetting.begin')"
                v-model="item.grid.slider.start"
                @on-blur="saveChanges"
              ></i-input>
              <i-input
                :placeholder="$srv.getI18nByPath('piece.oChartSetting.end')"
                v-model="item.grid.slider.end"
                @on-blur="saveChanges"
              ></i-input>
              <div class="verticle">
                <iSwitch
                  size="small"
                  @on-change="saveChanges"
                  v-model="item.grid.slider.show"
                ></iSwitch>
              </div>
            </div>
          </div>
        </div>
        <template v-if="item.filters">
          <div
            class="rules-cons header-group-children"
            v-for="(child, iidx) of item.filters"
            :key="'filter' + iidx"
          >
            <div class="rules-cons-inputs">
              <div class="rules-cons-fields">
                <i-input
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.field')"
                  v-model="child.field"
                  @on-blur="saveChanges"
                ></i-input>
                <i-input
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.value')"
                  v-model="child.value"
                  @on-blur="saveChanges"
                ></i-input>
              </div>
            </div>
            <div class="rules-res-btns">
              <Icon type="md-close" @click="removeChartFilter(idx, iidx)" />
            </div>
          </div>
        </template>
        <template v-if="item.x">
          <div
            class="rules-cons header-group-children"
            v-for="(child, iidx) of item.x"
            :key="'x' + iidx"
          >
            <div class="rules-cons-inputs">
              <div class="rules-cons-fields">
                <span
                  >X{{
                    $srv.getI18nByPath('piece.oChartSetting.axisfield')
                  }}：</span
                >
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.groupname')
                  "
                  v-model="child.field"
                  @on-blur="saveChanges"
                ></i-input>
              </div>
            </div>
            <div class="rules-res-btns">
              <Icon type="md-close" @click="removeChartX(idx, iidx)" />
            </div>
          </div>
        </template>
        <template v-if="item.y">
          <div
            class="rules-cons header-group-children"
            v-for="(child, iidx) of item.y"
            :key="'y' + iidx"
          >
            <div class="rules-cons-inputs">
              <div class="rules-cons-fields">
                <span
                  >Y{{ $srv.getI18nByPath('piece.oChartSetting.data') }}：</span
                >
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.fieldname')
                  "
                  v-model="child.field"
                  @on-blur="saveChanges"
                ></i-input>
              </div>
            </div>
            <div class="rules-res-btns">
              <Icon type="md-close" @click="removeChartY(idx, iidx)" />
            </div>
          </div>
        </template>
        <template v-if="item.shapes">
          <div
            class="rules-cons header-group-children"
            v-for="(child, iidx) of item.shapes"
            :key="'child' + iidx"
          >
            <div class="rules-cons-inputs">
              <div class="rules-cons-fields">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.graphictype')
                  }}：</span
                >
                <Select
                  clearable
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.type')"
                  @on-change="saveChanges"
                  v-model="child.series.type"
                >
                  <Option
                    v-for="(type, oidx) of shapeTypes"
                    :key="oidx"
                    :value="type.value"
                    >{{ type.label }}</Option
                  >
                </Select>
              </div>
              <div class="rules-cons-fields">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.stackedfield')
                  }}：</span
                >
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.stackedfield')
                  "
                  v-model="child.series.stack"
                  @on-blur="saveChanges"
                ></i-input>
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.yaxisindex')
                  }}：</span
                >
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.yaxisindex')
                  "
                  v-model="child.series.yIndex"
                  @on-blur="saveChanges"
                ></i-input>
              </div>
              <div class="rules-cons-fields" v-if="child.series.type === 'pie'">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.radius')
                  }}：</span
                >
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.innerradius')
                  "
                  v-model="child.series.radius[0]"
                  @on-blur="saveChanges"
                ></i-input>
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.outerradius')
                  "
                  v-model="child.series.radius[1]"
                  @on-blur="saveChanges"
                ></i-input>
              </div>
              <div
                class="rules-cons-fields"
                v-if="child.series.type === 'line'"
              >
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.smoothcurve')
                  }}：</span
                >
                <div class="verticle">
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="child.series.smooth"
                  ></iSwitch>
                </div>
              </div>
              <div class="rules-cons-fields">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.colour')
                  }}：</span
                >
                <ColorPicker
                  v-model="child.series.style.itemColor"
                  @on-change="saveChanges"
                  alpha
                ></ColorPicker>

                <div class="verticle">
                  <span
                    >{{
                      $srv.getI18nByPath('piece.oChartSetting.area')
                    }}：</span
                  >
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="child.series.style.hasArea"
                  ></iSwitch>
                </div>
              </div>
              <br />
              <div class="rules-cons-fields">
                <span>{{
                  $srv.getI18nByPath('piece.oChartSetting.xdatatype')
                }}</span>
                <Select
                  clearable
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.type')"
                  @on-change="saveChanges"
                  v-model="child.axis.x.type"
                >
                  <Option
                    v-for="(type, oidx) of dataTypes"
                    :key="oidx"
                    :value="type.value"
                    >{{ type.label }}</Option
                  >
                </Select>
              </div>
              <div class="rules-cons-fields">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.xaxisname')
                  }}：</span
                >
                <i-input
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.name')"
                  v-model="child.axis.x.name"
                  @on-blur="saveChanges"
                ></i-input>
              </div>
              <div class="rules-cons-fields">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.xaxismaximum')
                  }}：</span
                >
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.minimum')
                  "
                  v-model="child.axis.x.min"
                  @on-blur="saveChanges"
                ></i-input>
                <i-input
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.max')"
                  v-model="child.axis.x.max"
                  @on-blur="saveChanges"
                ></i-input>
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.interval')
                  "
                  v-model="child.axis.x.interval"
                  @on-blur="saveChanges"
                ></i-input>

                <div class="verticle">
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="child.axis.x.scale"
                  ></iSwitch>
                </div>
              </div>
              <span
                >{{
                  $srv.getI18nByPath('piece.oChartSetting.xlabelformat')
                }}：</span
              >
              <div class="rules-cons-fields">
                <o-formatter-setting
                  v-model="child.axis.x.formatter"
                  :formatList="formatList"
                  :showTitle="false"
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.dataformat')
                  "
                  @change="saveChanges"
                ></o-formatter-setting>
              </div>
              <br />
              <div class="rules-cons-fields">
                <span>{{
                  $srv.getI18nByPath('piece.oChartSetting.ydatatype')
                }}</span>
                <Select
                  clearable
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.type')"
                  @on-change="saveChanges"
                  v-model="child.axis.y.type"
                >
                  <Option
                    v-for="(type, oidx) of dataTypes"
                    :key="oidx"
                    :value="type.value"
                    >{{ type.label }}</Option
                  >
                </Select>
              </div>
              <div class="rules-cons-fields">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.yaxisname')
                  }}：</span
                >
                <i-input
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.name')"
                  v-model="child.axis.y.name"
                  @on-blur="saveChanges"
                ></i-input>
              </div>
              <div class="rules-cons-fields">
                <span
                  >{{
                    $srv.getI18nByPath('piece.oChartSetting.yaxismaximum')
                  }}：</span
                >
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.minimum')
                  "
                  v-model="child.axis.y.min"
                  @on-blur="saveChanges"
                ></i-input>
                <i-input
                  :placeholder="$srv.getI18nByPath('piece.oChartSetting.max')"
                  v-model="child.axis.y.max"
                  @on-blur="saveChanges"
                ></i-input>
                <i-input
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.interval')
                  "
                  v-model="child.axis.y.interval"
                  @on-blur="saveChanges"
                ></i-input>
                <div class="verticle">
                  <iSwitch
                    size="small"
                    @on-change="saveChanges"
                    v-model="child.axis.y.scale"
                  ></iSwitch>
                </div>
              </div>
              <span
                >{{
                  $srv.getI18nByPath('piece.oChartSetting.ylabelformat')
                }}：</span
              >
              <div class="rules-cons-fields">
                <o-formatter-setting
                  v-model="child.axis.y.formatter"
                  :formatList="formatList"
                  :showTitle="false"
                  :placeholder="
                    $srv.getI18nByPath('piece.oChartSetting.dataformat')
                  "
                  @change="saveChanges"
                ></o-formatter-setting>
              </div>
            </div>
            <div class="rules-res-btns">
              <Icon type="md-close" @click="removeChartShape(idx, iidx)" />
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { parse } from 'qs';
import { Component, Prop, Watch, Model, Vue } from 'vue-property-decorator';
import { Tsrv } from '@/services';
import oFormatterSetting from './o-formatter-setting.vue';

@Component({
  components: {
    oFormatterSetting
  }
})
export default class oChartSetting extends Vue {
  @Prop() isMes: boolean;

  @Model('modelchange') config: any;

  private chartBoxes = [];

  mounted() {
    this.saveChanges();
  }

  private saveChanges() {
    this.$emit('modelchange', this.config);
    this.$emit('change');
    if (this.isMes) {
      this.chartBoxes = [];
      this.config.forEach(el => {
        if (
          el.mes.x !== '' &&
          el.mes.y !== '' &&
          el.mes.w !== '' &&
          el.mes.h !== ''
        ) {
          this.chartBoxes.push({
            x: parseInt(el.mes.x, 10),
            y: parseInt(el.mes.y, 10),
            w: parseInt(el.mes.w, 10),
            h: parseInt(el.mes.h, 10)
          });
        }
      });
    }
  }

  private formatList = [
    {
      value: 'number',
      label: Tsrv.getI18nByPath('piece.oChartSetting.number')
    },
    {
      value: 'currency',
      label: Tsrv.getI18nByPath('piece.oChartSetting.currency')
    },
    {
      value: 'percent',
      label: Tsrv.getI18nByPath('piece.oChartSetting.percent')
    },
    {
      value: 'i18n',
      label: Tsrv.getI18nByPath('piece.oChartSetting.i18n')
    },
    {
      value: 'time',
      label: Tsrv.getI18nByPath('piece.oChartSetting.time')
    },
    {
      value: 'date',
      label: Tsrv.getI18nByPath('piece.oChartSetting.date')
    },
    {
      value: 'datetime',
      label: Tsrv.getI18nByPath('piece.oChartSetting.datetime')
    },
    {
      value: 'custom',
      label: Tsrv.getI18nByPath('piece.oChartSetting.custom')
    }
  ];

  private shapeTypes = [
    {
      value: 'pie',
      label: Tsrv.getI18nByPath('piece.oChartSetting.pie')
    },
    {
      value: 'line',
      label: Tsrv.getI18nByPath('piece.oChartSetting.line')
    },
    {
      value: 'bar',
      label: Tsrv.getI18nByPath('piece.oChartSetting.bar')
    },
    {
      value: 'gauge',
      label: Tsrv.getI18nByPath('piece.oChartSetting.gauge')
    }
  ];

  private dataTypes = [
    {
      value: 'category',
      label: Tsrv.getI18nByPath('piece.oChartSetting.category')
    },
    {
      value: 'value',
      label: Tsrv.getI18nByPath('piece.oChartSetting.value')
    }
  ];

  /**
   * 移除表头分组
   */
  private removeChartGroup(index: number) {
    this.config.splice(index, 1);
    this.saveChanges();
  }

  /**
   * 移除表头分组子节点
   */
  private removeChartShape(index: number, subIndex: number) {
    this.config[index].shapes.splice(subIndex, 1);
    this.saveChanges();
  }

  private removeChartX(index: number, subIndex: number) {
    this.config[index].x.splice(subIndex, 1);
    this.saveChanges();
  }

  private removeChartY(index: number, subIndex: number) {
    this.config[index].y.splice(subIndex, 1);
    this.saveChanges();
  }

  /**
   * 移除表头分组子节点
   */
  private removeChartFilter(index: number, subIndex: number) {
    this.config[index].filters.splice(subIndex, 1);
    this.saveChanges();
  }

  private addTableGroup() {
    this.config.push({
      type: 'table',
      mes: {
        id: '',
        limit: '',
        isAcc: false,
        x: '',
        y: '',
        w: '',
        h: ''
      },
      grid: {
        title: {
          text: '',
          subtext: ''
        },
        style: {
          titleColor: '#fff',
          rowHeight: '',
          oddRowColor: '',
          oddRowBgColor: '',
          evenRowColor: '',
          evenRowBgColor: '',
          headerFontSize: '',
          bodyFontSize: ''
        }
      },
      filters: []
    });
  }

  /**
   * 增加表头分组
   */
  private addChartGroup() {
    this.config.push({
      isShow: true,
      groupName: '',
      grid: {
        title: {
          text: '',
          subtext: ''
        },
        slider: {
          show: false,
          start: '80',
          end: '100'
        }
      },
      group: {
        ratio: ''
      },
      mes: {
        id: '',
        limit: '',
        isAcc: false,
        x: '',
        y: '',
        w: '',
        h: ''
      },
      x: [],
      y: [],
      filters: [],
      shapes: []
    });
    this.saveChanges();
  }

  /**
   * 增加表头分组子节点
   */
  private addChartShape(index: number) {
    this.config[index].shapes.push({
      axis: {
        x: {
          type: '',
          name: '',
          min: '',
          max: '',
          interval: '',
          scale: true,
          formatter: {}
        },
        y: {
          type: '',
          name: '',
          min: '',
          max: '',
          interval: '',
          scale: true,
          formatter: {}
        }
      },
      series: {
        smooth: false,
        stack: '',
        type: '',
        radius: ['', ''],
        yIndex: '0',
        style: {
          itemColor: '',
          hasArea: false
        }
      }
    });
    this.saveChanges();
  }

  /**
   * 增加表头分组子节点
   */
  private addChartFilter(index: number) {
    this.config[index].filters.push({
      field: '',
      value: ''
    });
    this.saveChanges();
  }

  private addChartX(index: number) {
    this.config[index].x.push({
      field: ''
    });
    this.saveChanges();
  }

  private addChartY(index: number) {
    this.config[index].y.push({
      field: ''
    });
    this.saveChanges();
  }
}
</script>

<style lang="scss" scoped>
.o-formatter-setting {
  padding: 0 !important;
}
.mes-board-view {
  height: 329px;
  position: relative;
  .mes-cell {
    width: calc(5% - 4px);
    height: calc(5% - 4px);
    float: left;
    background-color: #e6e6e6;
    margin: 2px;
  }
  .mes-box {
    background: rgba(0, 0, 0, 0.15);
    position: absolute;
    border: 1px solid #fff;
  }
}
.rules {
  .rules-title {
    width: 100%;
    height: 40px;
    .title {
      float: left;
      line-height: 34px;
      font-weight: bold;
    }
    button {
      float: right;
      margin: 6px 0 6px 10px;
    }
  }
  .rules-cell {
    background-color: #fdfdfd;
    padding: 10px;
    margin-bottom: 10px;
    .ivu-icon {
      cursor: pointer;
    }

    .rules-cell-title ::v-deep {
      width: 100%;
      height: 30px;
      line-height: 30px;
      .ivu-input-wrapper {
        width: 90px;
        margin-left: 5px;
        .ivu-input {
          background-color: transparent;
          border: 0;
        }
      }
      span {
        float: left;
      }
      .rules-cell-btns {
        float: right;
        button {
          margin-right: 10px;
          width: 35px;
          padding: 0px 2px;
          span {
            width: 100%;
            // text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
    .cell-four {
      .ivu-input-wrapper {
        width: 70px;
      }
    }
    .rules-cons {
      margin: 10px 0;
      display: flex;
      border-bottom: 1px solid #ddd;
      font-size: 12px;
      &.no-border {
        border-bottom: 0;
      }
      .rules-cons-title {
        line-height: 30px;
        flex-shrink: 0;
      }
      .rules-cons-inputs {
        margin: 0 10px;
        flex: 1;
        .rules-cons-fields {
          margin-bottom: 10px;
          font-size: 12px;
          span {
            flex-shrink: 0;
            line-height: 28px;
          }
        }
        .rules-cons-fields,
        .rules-cons-values {
          display: flex;
          > div {
            margin-left: 10px;
          }
          .verticle {
            display: flex;
            align-items: center;
          }
          > div:first-child {
            margin-left: 0px;
          }
        }
      }
      .rules-cons-btns {
        flex-shrink: 0;
        line-height: 30px;
      }
    }
    .rules-res {
      margin: 10px 0;
      display: flex;
      .rules-res-title {
        line-height: 30px;
        flex-shrink: 0;
      }
      .rules-res-inputs {
        margin: 0 10px;
        flex: 1;
        .rules-res-type {
          margin-bottom: 10px;
        }
        .rules-res-details {
          display: flex;
          flex-direction: column;
          > div {
            display: flex;
            justify-content: space-between;
            margin: 5px 0 10px;
          }
        }
      }
      .rules-res-btns {
        flex-shrink: 0;
        line-height: 30px;
      }
    }
  }
}
</style>
